<template>
	<!-- 市场监管动态 -->
	<view>
		<view class="list_box" v-if="list.length">
			<view class="card_item flex" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<view class="right">
					<image :src="item.coverImgs[0].url" mode=""></image>
				</view>
				<view class="left flex fjb flexColumn">
					<view>
						<view class="title">{{ item.title }}</view>
						<!-- <view class="username">孙大卫</view> -->
					</view>
					<view class="flex fjb alignC" style="justify-content: flex-end;">
						<!-- <view class="cate">类别：骨科</view> -->
						<view class="viewBtn flex fcenter">立即查看</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty_box" v-else>
			<image src="/static/empty.png" mode=""></image>
			<text>暂无内容</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		queryListByPageApi,
		queryCategoryListApi
	} from "@/common/api/articleApi.js"
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				isShow: false,
				categoryId: ''
			}
		},
		computed: {
			...mapState('user', ['ylProjectCode']),
		},
		onLoad() {},
		async onShow() {
			await this.getCateId('市场监管动态')
			this.list = []
			this.total = 0
			this.isShow = false
			this.pageNum = 1
			this.listByPage()
		},
		async onPullDownRefresh() {

		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			await this.listByPage()
		},
		methods: {
			async listByPage() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryId: this.categoryId,
					projectCode: this.ylProjectCode
				}
				const res = await queryListByPageApi(params)
				if (res.status == 200) {
					this.list.push(...res.data.records)
					if (this.list.length > 0) {
						this.isShow = true
					}
					this.total = res.data.total
				
				}
			},
			async getCateId(name) {
				let res = await queryCategoryListApi(name)
				console.log(res)
				if(res.status == 200) {
					this.categoryId = res.data.records[0].id
				}
			},
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: `/subpkg/detail/detail?item=${encodeURIComponent(JSON.stringify(item))}&title=${item.categoryName}`
				})
			},
		},
	}
</script>

<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.list_box {
		margin: 32rpx;

		.card_item {
			margin-bottom: 32rpx;
			.left {
				flex: 1;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.username {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: #9A9A9A;
				}

				.cate {
					font-size: 20rpx;
					color: #8F8F8F;
				}

				.viewBtn {
					width: 160rpx;
					height: 58rpx;
					background: #3FBEBB;
					color: #fff;
					font-size: 24rpx;
					border-radius: 37rpx;
				}
			}

			.right {
				width: 240rpx;
				height: 180rpx;
				margin-right: 32rpx;
				image {
					border-radius: 16rpx;
				}
			}
		}
	}
</style>